<template>
  <div>
    <el-form
      :model="form"
      ref="queryRef"
      :inline="true"
      class="formBox"
      :rules="rules"
      label-width="120px"
    >
      <el-row class="rowStyle">
        <el-col :span="22" class="colStyle">
          <h1 class="titleBox" v-if="!isShow">{{ form.kpTaskName }}</h1>
          <el-form-item prop="name" v-if="isShow" style="margin: 20px 0">
            <el-input v-model="form.kpTaskName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="handleUpdate" v-if="!isBtn"
            >修改</el-button
          >
          <el-button type="primary" @click="handleSave" v-if="isBtn"
            >保存</el-button
          ></el-col
        >
      </el-row>

      <el-table :data="form.dataList" border class="borderTable">
        <el-table-column label="序号" align="center" type="index" width="70" />
        <el-table-column label="省" align="center">
          <template #default="scope">
            <!-- <span v-for="(v, i) in form.dataList" :key="i">
              {{ v.provinceName }}</span
            > -->
            {{ scope.row.provinceName }}
          </template>
        </el-table-column>
        <el-table-column label="考评得分" sortable align="center">
          <template #default="scope">
            {{ scope.row.score }}
          </template>
        </el-table-column>
        <el-table-column label="分项得分" align="center">
          <el-table-column
            :label="v.name"
            sortable
            align="center"
            v-for="(v, i) in form.titleList"
            :key="i"
          >
            <template #default="scope">
              <span v-for="(x, y) in scope.row.index2ScoreList" :key="y">
                <span v-if="!isShow">
                  <span v-if="v.id == x.kesdi2Id">
                    {{ x.lastScore }}
                  </span>
                </span>
                <span  v-if="isShow" >
                  <el-form-item  v-if="v.id == x.kesdi2Id" 
                  :prop="`dataList.${scope.$index}.index2ScoreList.${y}.lastScore`"  :rules="rules.lastScore">
                       <el-input
                        v-model.number="x.lastScore"
                        placeholder="请输入"
                  ></el-input>
                </el-form-item>
                </span>
              </span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </el-form>
    <p class="btnBox">
      <el-button type="primary" @click="handlePublic">发布</el-button>
      <el-button type="primary" @click="handleClose">关闭</el-button>
    </p>
  </div>
</template>

<script setup>
import {
  previewRanking,
  updateRanking,
  publishRanking,
} from "@/api/workEvaluation/appraisalTaskManagement/appraisalTaskManage.js";
import { onMounted, reactive, toRef } from "vue";
import { useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const krtId = ref("");
const isBtn = ref(false);
const data = reactive({
  form: {
    kpTaskName: "",
    dataList: [],
    titleList: [],
  },
  isShow: false,
});
const { form, isShow } = toRefs(data);
const positiveInteger = (rule, value, callback) => {
  const reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g
	if(!reg.test(value)){
		callback(new Error('只能输入数字'))
	}
	callback()
};
const rules=ref({
  lastScore:[
  { required: true, trigger: "blur", message: "请输入数字", validator: positiveInteger },
  ]
})
const getData = () => {
  previewRanking({ krtId: krtId.value }).then((res) => {
    isShow.value = res.data.show;
    form.value.kpTaskName = res.data.kpTaskName;
    form.value.titleList = res.data.titleList;
    form.value.dataList = res.data.dataList;
  });
};
// 修改
const handleUpdate = () => {
  isShow.value = true;
  isBtn.value = true;
};
// 保存
const handleSave = () => {
 
  let arr=[]
  
  form.value.titleList.forEach((x,y)=>{
    form.value.dataList.forEach((v, i) => {
      if (v.index2ScoreList) {
        v.index2ScoreList.forEach((a, b) => {
          if(x.id==a.kesdi2Id){
            let obj1 = {}
            obj1.provinceId = a.provinceId;
            obj1.kesdi2Id = a.kesdi2Id;
            obj1.score = a.lastScore;
            arr.push(obj1)
          }
        });
      }
    });
  })
  const obj = {
    krtId: krtId.value,
    kpTaskName: form.value.kpTaskName,
    dataList: arr,
  };
  updateRanking(obj).then((res) => {
    if (res.code == 200) {
      proxy.$modal.msgSuccess("保存成功");
      isBtn.value = false;
      getData();
    }
  });
};
// 发布
const handlePublic = () => {
  if(isBtn.value==false){
     publishRanking({ krtId: krtId.value }).then((res) => {
      if (res.code == 200) {
        proxy.$modal.msgSuccess("发布成功");
        handleClose();
      }
    });
  }else{
    proxy.$modal.msgWarning('请先保存')
  }
 
};
// 关闭
const handleClose = () => {
  router.push({
    path: "/workEvaluation/appraisalTaskManagement/appraisalTaskManage",
    // query: {
    //   metaTitle: "考评任务管理",
    // },
  });
};

onMounted(() => {
  if (route.query.krtId) {
    krtId.value = route.query.krtId;
  }
  getData();
});
</script>
<style lang="scss" scoped>
.formBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.rowStyle {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.colStyle {
  text-align: center;
}
.btnBox {
  width: 90%;
  text-align: center;
}
</style>
